<template>
	<!-- 用户信息 -->
	<view class="my-userinfo-container">
		<!-- 头像和用户信息 -->
		<view class="top-box">
			<view class="userinfo">
				<image :src="avatar ? avatar : '../../static/132.jpg'" class="avatar" mode="" @click="changeAvatar" ></image>
			    <view class="nickname_vip">
					<view class="nickname">{{userInfo.nickname}}</view>
					<view class="vip-box" v-if="userInfo.vip == 1">
						<image src="../../static/wg.png" class="vip" mode="widthFix"></image>
						<view  class="lv">VIP</view>
					</view>
					<view class="vip-box_2" v-else>
						<image src="../../static/wgc.png" class="vip" mode="widthFix"></image>
						<view  class="lv">CU</view>
					</view>
				</view>
				<!-- <view class="sign" @click="getsignin">
					<uni-icons type="gift" :size="15" color="#fff"></uni-icons>
					<view class="signtext">签到领积分</view>
				</view> -->
				<view class="number">
					<view class="option">
						<view class="int">{{star_total}}</view>
						<view class="number-text">我的收藏</view>
					</view>
					<view class="column-line"></view>
					<view class="option">
						<view class="int">{{userInfo.money}}</view>
						<view class="number-text">我的圣币</view>
					</view>
					<view class="column-line"></view>
					<view class="option">
						<view class="int">{{userInfo.tx_money}}</view>
						<view class="number-text">已提圣币</view>
					</view>
				</view>
			</view>
			<image src="../../static/topbg.png" class="top-bg"></image>
		</view>
		<!-- 开通vip宣传图 -->
		<view class="nav">
			<view class="vipimage">
				<view class="online">
					开通会员畅享全站
				</view>
				<view class="btn" @click="getvip">
					抢先体验
				</view>
				<image src="../../static/myvip.png" mode="widthFix" class="vip-image" ></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="option-list">
			<view class="list-item" @click="copyinvitation">
				<uni-icons custom-prefix="iconfont" type="icon-wodeguanzhu" class="icon"></uni-icons>
				<view class="list-item-text">我的邀请码 : {{userInfo.invitationcode}}</view>
				<view class="right" style="color: #999;">复制</view>
			</view>
			<view class="list-item" @click="to_star_page">
				<uni-icons custom-prefix="iconfont" type="icon-shoucang" class="icon"></uni-icons>
				<view class="list-item-text">我的收藏</view>
				<uni-badge class="uni-badge-left-margin" :text="star_total" />
				<uni-icons type="right" class="right"></uni-icons>
			</view>
			<view class="list-item" @click="manage">
				<uni-icons custom-prefix="iconfont" type="icon-shezhi" class="icon"></uni-icons>
				<view class="list-item-text">账号管理</view>
				<uni-icons type="right" class="right"></uni-icons>
			</view>
			<view class="list-item" @click="txmoney">
				<uni-icons custom-prefix="iconfont" type="icon-youhuiquan" class="icon"></uni-icons>
				<view class="list-item-text">去提现</view>
				<uni-icons type="right" class="right"></uni-icons>
			</view>
		</view>
		<view class="option-list">
			<view class="list-item" @click="contantus">
				<uni-icons custom-prefix="iconfont" type="icon-weixin" class="icon"></uni-icons>
				<view class="list-item-text">联系老师</view>
				<uni-icons type="right" class="right"></uni-icons>
			</view>
			<view class="list-item" @click="delStorage">
				<uni-icons custom-prefix="iconfont" type="icon-shanchu" class="icon"></uni-icons>
				<view class="list-item-text">清除缓存</view>
				<view class="right">{{storageSize}}</view>
			</view>
			<view class="list-item" @click="logout">
				<uni-icons custom-prefix="iconfont" type="icon-tuichu" class="icon"></uni-icons>
				<view class="list-item-text">退出登录</view>
				<uni-icons type="right" class="right"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from "vuex"
	export default {
		name:"my-userinfo",
		data() {
			return {
				show:false,
				portImageUrl: getApp().globalData.portImageUrl
			};
		},
		computed:{
			...mapState("m_user",['userInfo']),
		    ...mapGetters("m_star",['star_total']),
			...mapState("m_setting",['storageSize']),
			...mapState("m_signin",['signin','signinday']),
			//头像
			avatar(){
				if(this.userInfo.avatarurl.indexOf("/") == -1){
					return this.portImageUrl +"/avatar/"+ this.userInfo.avatarurl
				}else{
					return this.userInfo.avatarurl
				}
			},
		
			
		},
		methods:{
			...mapMutations("m_user",["updateUserInfo","updateAddress","updateToken","updateTeacherInfo"]),
			...mapMutations("m_setting",['delSetting','updateStorageSize']),
			
			/**
			 * 复制邀请码
			 */
			copyinvitation(){
				uni.setClipboardData({
					data:this.userInfo.invitationcode,
					success:function(){
						uni.$showMsg("复制成功")
					},
				})	
			},
			/**
			 * 修改头像
			 */
			changeAvatar(){
				uni.navigateTo({
					url:"/subpkg/image_crop/image_crop"
				})
			},
			/**
			 * 跳转到收藏页面
			 */
			to_star_page(){
				uni.navigateTo({
					url:"/subpkg/star_list/star_list"
				})
			},
			/**
			 * 账号管理
			 */
			manage(){
				uni.navigateTo({
					url:"/subpkg/manage/manage"
				})
			},
			/**
			 * 关于我们
			 */
			aboutus(){
				uni.navigateTo({
					url:"/subpkg/aboutus/aboutus"
				})
			},
			/**
			 * 联系客服
			 */
			contantus(){
			    uni.navigateTo({
			    	url:"/subpkg/contactus/contactus"
			    })	
			},
			/**
			 * 清除缓存
			 */
			delStorage(){
				//清除用户添加的地址信息
				this.updateAddress()
				//清除用户添加的配置信息，下次打开具体页面的时候会重新访问数据库再加载过来。
				this.delSetting()
				this.updateStorageSize(uni.getStorageInfoSync().currentSize + "KB")
				uni.$showMsg("已清理数据")
			},
			/**
			 * 退出登录
			 */
			async logout(){
				await uni.showModal({
					title:"提示",
					content:"确定退出登录?",
					success:(res)=>{
						if(res.confirm){
							//用户确认退出登录的操作
							//需要清空vuex中的userInfo ，token 和 address
							this.updateUserInfo()
							this.updateAddress()
							this.updateToken()
							this.updateTeacherInfo()
						}
					}
				});
			},
			/**
			 * 领积分
			 */
			async getsignin(){
				//创建时间戳
				let time = new Date().getTime()
				let YMD = this.getYMD(time);
				//保存到Stroage中
				if(this.getYMD(parseInt(this.userInfo.signintime)) == YMD){
					return uni.$showMsg("今日已经签到过，明天再来吧！")
				}else{
					//签到并保存时间戳到Stroage中，顺便记录签到天数
					let day = parseInt(this.userInfo.signinday) + 1
					let $signin = {
						"id":this.userInfo.id,
						"token":this.userInfo.token,
						"signintime":time,
						"signinday":day,
						"integral": parseInt(this.userInfo.integral) + 5
					}
					const {data:res} = await uni.$http.post("Users/updateUserInfo",$signin)
					if(res.meta.status == 0) return uni.$showMsg("签到失败")
					res.data['token'] = this.userInfo.token
					this.updateUserInfo(res.data);
					return uni.$showMsg("签到成功")
				}
			},
			/**
			 * 获取时间戳的年月日
			 */
			getYMD(timestamp){
				let data = new Date(timestamp)
				let Y = data.getFullYear()
				let M = data.getMonth()+1
				let D = data.getDate()
				return  Y+String(M)+String(D)
			},
			/**
			 * 跳转到开通VIP页面
			 */
			getvip(){
				uni.navigateTo({
					url:"/subpkg/vip_page/vip_page"
				})
			},
			/**
			 * 到提现页面
			 */
			txmoney(){
				uni.navigateTo({
					url:"/subpkg/txmoney/txmoney"
				})
			}
		}
	}
</script>

<style lang="scss">
@import "@/static/my-userinfo.scss";
</style>